var labelType, useGradients, nativeTextSupport, animate;
(function() {
    var ua = navigator.userAgent,
    iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
    typeOfCanvas = typeof HTMLCanvasElement,
    nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
    textSupport = nativeCanvasSupport 
    && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
    //I'm setting this based on the fact that ExCanvas provides text support for IE
    //and that as of today iPhone/iPad current text support is lame
    labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
    nativeTextSupport = labelType == 'Native';
    useGradients = nativeCanvasSupport;
    animate = !(iStuff || !nativeCanvasSupport);
})();

function buildHierarchy(){
    //Create a new ST instance
    var st = new $jit.ST({
        //id of viz container element
        injectInto: 'infovis',
        //set duration for the animation
        duration: 400,
        //set animation transition type
        transition: $jit.Trans.Quart.easeInOut,
        //set distance between node and its children
        levelDistance: 10,
        //enable panning
        Navigation: {
            enable:true,
            panning:false
        },
        //set node and edge styles
        //set overridable=true for styling individual
        //nodes or edges
        Node: {
            height: 20,
            width: 90,
            type: 'rectangle',
            color: '#aaa',
            overridable: true
        },
        Edge: {
            type: 'bezier',
            overridable: true
        },
        
        //Add tooltips  
        Tips: {  
            enable: true,  
            onShow: function(tip, node) {  
                var data = node.data;  
                var html = "<div class=\".tip-title\"><b>Category:</b> " + data.category;  
                html += "<br/><b>Term:</b> " + data.term;  
                html += "<br/><b>Concept Id:</b> " + data.conceptId;  
                html += "<br/><b>Descriptor Id:</b> " + data.descriptorId + "</div>";  
                tip.innerHTML = html;  
            }  
        }, 
        
          
        //        request: function(nodeId, level, onComplete) {  
        //           
        //        }, 
//        onBeforeCompute: function(node){  
//            
//        },  
        //      
        //        onAfterCompute: function(){  
        //            
        //        },  

        //This method is called on DOM label creation.
        //Use this method to add event handlers and styles to
        //your node.
        onCreateLabel: function(label, node){
            label.id = node.id;            
            label.innerHTML = node.name;
            label.onclick = function(){
                st.onClick(node.id);
            };
            //set label styles
            var style = label.style;
            style.width = 90 + 'px';
            style.height = 17 + 'px';            
            style.cursor = 'pointer';
            style.color = '#FFFFFF';
            style.fontSize = '0.8em';
            style.textAlign= 'center';
            style.paddingTop = '3px';
            style.overflow = 'hidden';

        },
        
        //This method is called right before plotting
        //a node. It's useful for changing an individual node
        //style properties before plotting it.
        //The data properties prefixed with a dollar
        //sign will override the global node style properties.
        onBeforePlotNode: function(node){
            //add some color to the nodes in the path between the
            //root node and the selected node.
            if (node.selected) {
                node.data.$color = "#000033";
            }
            else {
                delete node.data.$color;
                //if the node belongs to the last plotted level
                if(!node.anySubnode("exist")) {
                    //count children number
                    var count = 0;
                    node.eachSubnode(function(n) {
                        count++;
                    });
                    //assign a node color based on
                    node.data.$color = ['#000066', '#003399', '#330099', '#3333CC', '#3366CC', '#3399FF'][count];                    
                }
            }
        },
        
        //This method is called right before plotting
        //an edge. It's useful for changing an individual edge
        //style properties before plotting it.
        //Edge data proprties prefixed with a dollar sign will
        //override the Edge global style properties.
        onBeforePlotLine: function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = "#000033";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        }
        
    });
    var hierarchyJson = jQuery.parseJSON($('#hierarchy').text());
    
    var documentsByDescriptorId = jQuery.parseJSON($('#documentsByDescriptorIdIndex').text());
    
    //load json data
    st.loadJSON(hierarchyJson);
    //compute node positions and layout
    st.compute();
    //emulate a click on the root node.
    st.onClick(st.root);
    
//end
}
